<template>
  <div id="Content">
    <el-table :data="itemList" style="width: 800px;margin: 0 auto">
      <el-table-column label="Item ID">
        <template #default="{ row }">
          <el-button type="text" @click="view(row)">{{row.itemId}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="Product ID">
        <template v-slot="{row}">
          <span>{{ productId }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="itemSpecification" label="Description"></el-table-column>-->
      <el-table-column prop="itemPrice" label="List Price"></el-table-column>
      <el-table-column label="Operation">
        <template #default="{ row }">
          <el-button type="text" @click="addToCart(row)">Add to Cart</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="back">
      <a @click="back">Return to Main Menu</a>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import axios from 'axios'; // 假设你使用 Axios 发送请求

export default{
  components:{
    ElTable,
    ElTableColumn,
    ElButton
  },
  setup(){
    const router=useRouter();
    const itemList=ref([]);
    const productId=router.currentRoute.value.query.productId;

    const fetchData=async()=>{
      try {
        const response = await axios.get(`http://localhost:8080/jpetstore/pets/${productId}`);
        itemList.value = response.data.data.petItemList;
      } catch (error) {
        console.error('Error fetching item data:', error);
      }
    };
    //添加购物车
    const addToCart = (row) => {
      //"productId":"2""itemId":"3""quantity":"1"
      router.push({ path: '/cart', query: { itemId:row.itemId,productId:productId,quantity:1 } });
    };

    // 详情
    const view = (row) => {
      router.push({ path: '/item', query: { itemId:row.itemId,productId:productId} });
    };

    function back(){
      router.go(-1)
    }
    // 在组件加载时获取数据
    onMounted(() => {
      fetchData();
    });


    return {
      itemList,
      addToCart,
      back,
      productId,
      view
    };
  }
};
</script>

<style>
a {
  cursor: default;
}

#Content {
  display: flex;
  justify-content: space-between;
}
</style>